<template>
    <div class="formCell" :style="'background-color:'+bgColor+';'">
        <div class="leftSlot">
            <div v-if="important" class="starSign">*</div>
            <div class="word">{{title}}</div>
            <i v-if="headIcon" class="cubeic-warn warn-icon"></i>
        </div>
        <div class="rightSlot">
            <div v-if="type" class="selectWay" @click="showPicker">
                <div class="word">{{value}}</div>
                <i v-if="selected" class="cubeic-arrow arrow-icon"></i>
            </div>
            <div v-if="typeInput" class="inputWay">
                <cube-input :placeholder="placeholder" v-model="value"></cube-input>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name : "index",
        props:{
            title:String,
            headIcon: {
                type:Boolean,
                default:false
            },
            important:{
                type : Boolean,
                default : false
            },
            type:{
                type:Boolean,
                default: false
            },
            value:String,
            selected:{
                type:Boolean,
                default:false
            },
            placeholder:String,
            typeInput:{
                type:Boolean,
                default : false
            },
            bgColor:{
                type:String,
                default:'#fff'
            },
            list: {
                type:Array
            },
            isPicker:{
                type:Boolean,
                default:true
            }
        },
        methods: {
            showPicker() {
                if(!this.isPicker)return
                if (!this.picker&&this.type!==false) {
                    this.picker = this.$createPicker({
                        title: 'Picker',
                        data: [this.list],
                        onSelect: this.selectHandle,
                        onCancel: this.cancelHandle
                    })
                }
                this.picker.show()
            },
            selectHandle(selectedVal, selectedIndex, selectedText) {
                this.$emit('input',selectedText.join(' '))
                this.$createDialog({
                    type: 'warn',
                    content: `Selected Item: <br/> - value: ${selectedVal.join(', ')} <br/> - index: ${selectedIndex.join(', ')} <br/> - text: ${selectedText.join(' ')}`,
                    icon: 'cubeic-alert'
                }).show()
            },
            cancelHandle() {
                this.$createToast({
                    type: 'correct',
                    txt: 'Picker canceled',
                    time: 1000
                }).show()
            }
        }
    }
</script>

<style scoped lang="stylus">
.formCell
    padding 0.33rem 0.40rem 0.40rem 0.47rem
    height 0.37rem
    display flex
    justify-content space-between
    align-items center
    border-bottom 1px solid #EAECEC
    .leftSlot
        font-size 0.40rem
        display flex
        justify-content center
        .word
            color #333333
        .warn-icon
            color #00A398
        .starSign
            font-size 0.29rem
            color #00A398
            display flex
            align-items center
    .rightSlot
        .selectWay
            font-size 0.35rem
            display flex
            justify-content center
        .word
            color #666666
            margin-right 0.21rem
        .arrow-icon
            padding-top 0.03rem
/deep/.cube-input
    border none
    input
        text-align right
.cube-input_active::after
    border none
.cube-input::after
    border none
</style>